<template>
	<view>
		<view class="base">
			<view class="base-item">
				<view class="text-label">联系人</view>
				<input v-model="dataForm.contact" class="phone" maxlength="15" placeholder="请输入联系人">
			</view>
			<view class="base-item">
				<view class="text-label">联系方式</view>
				<input v-model="dataForm.phone" class="phone" type="number" maxlength="15" placeholder="请输入联系方式">
			</view>
			<view class="img-item">
				<view class="top base-item">
					<view class="text-label">营业执照</view>
				</view>
				<view class="bot reverse">
					<uploadImg class="uploadImgs mag-left" ref='uploadImg' :mode="licensePhoto1"
						@chooseFile='licensePhoto' @imgDelete='imgDeletelicensePhoto'
						@tap="getUploadImg('licensePhoto')" @getImagePath="getImagePath()" :control="control"
						:columnNum="columnNum" />
				</view>
			</view>
		</view>
		<!-- !-- 提交按钮 --> 
		<view class="btn" @tap="confirm()">
			<button class="confirm">提交</button>
		</view>
	</view>
</template>

<script>
	import uploadImg from "../components/uploadImg/uploadImg.vue"
	const http = require('../../utils/http.js')
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				dataForm: {
					settleType:''
				},
				licensePhoto1:[],
				control: true,
				currentImg:''
			}
		},
		mounted() {
			this.getdetail()
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this
			const eventChannel = this.getOpenerEventChannel();
			// 监听spuId事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('settleType', function(data) {
				_this.dataForm.settleType = data
			})
		},
		methods: {
			//获取详情
			getdetail(){
				const paramss = {
					url: '/gscloud_system/system/settle/getByUser',
					method: 'GET',
					data: {
						settleType: this.dataForm.settleType
					},
					callBack: res => {
						console.log('nnnnn')
						console.log(res)
						if(res){
							this.dataForm = res
							this.licensePhoto1.push(res.licensePhoto)
						}
							console.log('nnnnn')
					}
				}
				http.request(paramss)
			},
			// 提交
			confirm(){
				console.log('nnnnn')
					
				
				if (!this.dataForm.contact) {
					uni.showToast({
						title: '请输入联系人！',
					 icon: 'none'
					})
					return
				}
				if (!this.dataForm.phone) {
					uni.showToast({
					 title: '请输入联系方式！',
						icon: 'none'
					})
					return
				}		
				
				if (!this.dataForm.licensePhoto) {
					uni.showToast({
						title: '请上传营业执照！',
						icon: 'none'
					})
					return
				}
				const params = {
					url: '/gscloud_system/system/settle',
					method: 'POST',
					data: this.dataForm,
					callBack: res => {
						console.log(res)
						uni.showToast({
							title: '加入成功！',
							icon: 'none'
						})
						setTimeout(() => {
							let pages = getCurrentPages()//页面栈
							let prePage = pages[pages.length - 2]//上一页
							prePage.$vm.reFresh = Math.random()//触发上一页监听器
							uni.navigateBack()//返回上一页
						}, 1500)
					}
				}
				http.request(params)
				
			},
			getUploadImg: function(type) {
				this.currentImg = type
			},
			getImagePath(imgUrl) {
				switch (this.currentImg) {
				  case 'licensePhoto':
				    this.dataForm.licensePhoto = imgUrl
				    break
				}
			},
			licensePhoto(list, v) {
				this.dataForm.licensePhoto = v
				console.log(this.dataForm.licensePhoto)
			},
			imgDeletelicensePhoto(list, eq) {
				this.dataForm.licensePhoto = ''
			}
		},
	}
</script>

<style lang="scss" scoped>
	//提交按钮
	.btn {
		padding: 830rpx 0 50rpx 0;
		margin: auto;
	
		.confirm {
			width: 710rpx;
			height: 72rpx;
			background: linear-gradient(138deg, rgba(195, 13, 35, 0.8) 0%, #C30D23 100%);
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 72rpx;
		}
	}
	.base {
		.isimport {
			margin-top: 76rpx;
		}

		.base-item {
			background-color: white;
			margin-bottom: 5rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 20rpx;

			.text-label {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666
			}

			input {
				text-align: right;
			}

			::-webkit-input-placeholder {
				/* WebKit browsers */
				direction: rtl;
			}

			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				direction: rtl;
			}

			::-moz-placeholder {
				/* Mozilla Firefox 19+ but I'm not sure about working */
				direction: rtl;
			}

			:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				direction: rtl;
			}

			.phone {
				// width: 210rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.img-item {
			background-color: white;
			margin-bottom: 5rpx;
			padding-bottom: 20rpx;

			.top {
				.img-label {
					display: flex;

					/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
					::v-deep radio .wx-radio-input.wx-radio-input-checked {
						background-color: white;
						border: 1px solid #999999;
					}

					/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
					::v-deep radio .wx-radio-input.wx-radio-input-checked::before {
						background-color: #C30D23;
						color: #C30D23;
						border-radius: 50%;
					}

					.radi {
						margin-right: 60rpx;
					}

					.btnUp {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
					}

					.jt {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			// 单张图片
			.reverse {
				display: flex;
				flex-direction: row-reverse;
			}

			// 两张
			.around {
				display: flex;
				justify-content: space-around;
			}

			.bot {
				.uploadImgs {
					display: inline-block;
					width: 330rpx;
					height: 200rpx;
					background: #F2F2F2;
					margin: 0rpx 20rpx 10rpx;

					::v-deep .column4 {
						width: 100%;
					}

					::v-deep .imglistItem {
						width: 100%;
						height: 200rpx;
					}
				}
			}
		}
	}
</style>
